<template>
	<view class="container">
		<template v-if="show==0">
			<view class="head">
				<view class="head-top" style="justify-content: center;">
					<view class="">欢迎您使用线上缴费</view>
				</view>
				<view class="head-txt">
					<view class="head-txt-item">学校名称:</view>
					<view class="head-txt-item">学号:请联系学校提供获取</view>
					<view class="head-txt-item" style="margin-bottom: 0rpx;">填写规则:选择学校并填写学生学号即可</view>
				</view>
			</view>
			<view class="card">
				<u--form labelPosition="left" :model="uForm" labelWidth='90'>
					<view style="display: flex;align-items: center;margin-bottom: 25rpx;" @click="showSchool = true;">
						<label style="width: 90px;">学校名称:</label>
						<view :class="['inputBox',fontFlag ?'fontSColor':'']">{{uForm.school_name}}</view>
					</view>
					<u-form-item label="姓名:">
						<u--input v-model="uForm.name" placeholder="请输入姓名"></u--input>
					</u-form-item>
					<u-form-item label="学生学号:">
						<u--input v-model="uForm.code" placeholder="请输入学号"></u--input>
					</u-form-item>
					<u-form-item label="手机号:">
						<u--input v-model="uForm.phone" placeholder="请输入手机号"></u--input>
					</u-form-item>
				</u--form>
			</view>
			<view class="btn">
				<u-button type="primary" text="下一步" @click="next()"></u-button>
			</view>
			<u-picker keyName="name" :show="showSchool" :columns="actions" @confirm="schoolSelect"
				@cancel='showSchool = false'></u-picker>
		</template>
		<template v-else>
			<view class="top-btn">
				<u-button type="primary" text="增加其他学生" @click="binding"></u-button>
			</view>
			<scroll-view scroll-y="true" style="width: 100%;height: 80%;">
				<view class="head" style="margin-bottom: 30rpx;" v-for="(item,index) in studentList" :key="index">
					<view class="head-top" style="padding: 0 40rpx;box-sizing: border-box;">
						<u-avatar :src="src"></u-avatar>
						<view style="margin-left: 30rpx;">{{item.name}}</view>
						<view style="width: 150rpx;margin-left: 30rpx;">
							<u-button type="error" text="解除绑定" size="small" showCancelButton
								@click="()=>{showModal=true;id=item.id}"></u-button>
						</view>
					</view>
					<view class="head-txt">
						<view class="head-txt-item">学&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号:{{item.code}}</view>
						<view class="head-txt-item">
							年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;级:{{item.grade_name}}{{item.classes_name}}</view>
						<view class="head-txt-item">性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别:{{item.sex}}</view>
						<view class="head-txt-item">生&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日:{{item.birth}}</view>
						<view class="head-txt-item">入学时间:{{item.school_at}}</view>
						<view class="head-txt-item" style="margin-bottom: 0rpx;">学校名称:{{item.school_name}}</view>
						<view class="head-btn" style="margin-top: 50rpx;">
							<view class="head-btn-item">
								<u-button type="primary" text="更新信息" size="small" style="width: 150rpx;"
									@click="info(item)"></u-button>
							</view>
							<view class="head-btn-item" style="justify-content: center;">
								<u-button type="primary" text="缴费历史" size="small" style="width: 150rpx;"
									@click="history"></u-button>
							</view>
							<view class="head-btn-item" style="justify-content: flex-end;">
								<u-button type="primary" text="请假操作" size="small" style="width: 150rpx;"
									@click="leave(item.id)"></u-button>
							</view>
						</view>
						<view class="head-btn" style="margin-top: 30rpx;">
							<view class="head-btn-item">
								<u-button type="primary" text="立即缴费" size="small" style="width: 150rpx;"
									@click="pay(item)"></u-button>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<u-modal showCancelButton :title="title" :show="showModal" content='确认解绑该学生吗?' @cancel='showModal=false'
				@confirm='confirm'></u-modal>
		</template>
	</view>
</template>

<script>
	import jWeixin from 'jweixin-module'
	var dayjs = require('dayjs')
	import {
		login
	} from '@/api/user.js'
	import {
		school,
		studentall,
		studentcount,
		studentlist,
		studentinfo,
		studentunbind
	} from '@/api/student.js'
	import check from "@/utils/check.js"
	export default {
		data() {
			return {
				title: '提示',
				src: 'https://jiaofei-1259503077.cos.ap-beijing.myqcloud.com/1.png',
				show: 0,
				showModal: false,
				showSchool: false,
				actions: [],
				uForm: {
					school_id: '',
					school_name: '请选择学校',
					name: '',
					code: '',
					phone: '',
				},
				isOk: 0,
				studentList: [],
				id: '',
				fontFlag:false
			}
		},
		onLoad() {
			if (localStorage.getItem('token') == null) {
				if (localStorage.getItem('isOk') != null) {
					this.isOk = localStorage.getItem('isOk')
					if (this.isOk == 1) {
						let wechat_code = this.getUrlParam('code')
						this.login(wechat_code)
					}
				} else {
					this.getWeChatCode()
				}
			} else {
				this.studentall()
				this.school()
			}
		},
		methods: {
			//学校列表用于下拉
			async school() {
				let res = await school()
				if (res.code == 200) {
					let arr = res.data
					this.actions.push(arr)
				} else {
					uni.$u.toast(res.msg);
				}
			},
			//获取已绑定学生列表
			async studentall() {
				let res = await studentall()
				if (res.code == 200) {
					if (res.data.length == 0) {
						this.show = 0
					} else {
						this.show = 1
						this.studentList = res.data
					}

				} else {
					uni.$u.toast(res.msg);
				}
			},
			//用户微信授权登录
			async login(wechat_code) {
				let res = await login({
					wechat_code
				})
				if (res.code == 10001) {
					uni.$u.toast(res.msg);
					localStorage.clear()
					this.show = 0
				} else {
					localStorage.setItem('token', res.token)
					this.show = 1
					setTimeout(() => {
						this.studentall()
						this.school()
					}, )
				}
			},
			//学校选择
			schoolSelect(e) {
				let obj = e.value[0]
				this.uForm.school_id = obj.id
				this.uForm.school_name = obj.name
				this.showSchool = false
				this.fontFlag=true
			},
			// 下一步
			async next() {
				if (this.uForm.school_id.length == 0) {
					return uni.$u.toast('请选择学校');
				}
				if (this.uForm.code.length == 0) {
					return uni.$u.toast('请输入学号');
				}
				if (this.uForm.phone.length == 0) {
					return uni.$u.toast('请输入手机号');
				}
				if (!check.mobile(this.uForm.phone)) {
					return uni.$u.toast('手机号码不正确');
				}
				let res = await studentlist({
					...this.uForm
				})
				if (res.code == 200) {
					uni.navigateTo({
						url: "/pages/binding/binding?obj=" + JSON.stringify(res.data[0])
					})
				} else {
					uni.$u.toast(res.msg);
				}

			},
			// 授权获取code
			getWeChatCode() {
				let local = encodeURIComponent(window.location.href); //获取当前页面地址作为回调地址
				let appid = 'wxa7eedf6e3211f334'
				// let appid = 'wxcd2d7668b71f5610'
				window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appid +
					"&redirect_uri=" + local + "&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect";
				localStorage.setItem('isOk', 1)

			},
			// 截取 url中的code方法
			getUrlParam(name) {
				var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
				var r = window.location.search.substr(1).match(reg);
				if (r != null) return unescape(r[2]);
				return null
			},
			//解除绑定
			async confirm() {
				let res = await studentunbind({
					id: this.id
				})
				if (res.code == 200) {
					uni.$u.toast(res.msg);
					this.showModal = false
					this.studentall()
				} else {
					uni.$u.toast(res.msg);
				}
			},
			//增加其他学生
			binding() {
				this.show = 0
			},
			//立即缴费
			pay(item) {
				uni.navigateTo({
					url: "/pages/arrearage/arrearage?student_id=" + item.id
				})
			},
			//获取已绑定学生信息
			async info(item) {
				let res = await studentinfo({
					student_id: item.id
				})
				if (res.code == 200) {
					uni.navigateTo({
						url: "/pages/info/info?obj=" + JSON.stringify(res.data)
					})
				} else {
					uni.$u.toast(res.msg);
				}

			},
			//缴费历史
			history() {
				uni.navigateTo({
					url: "/pages/history/history"
				})
			},
			//请假操作
			leave(id) {
				let obj = {
					month: dayjs().format('YYYY-MM'),
					student_id: id
				}
				uni.navigateTo({
					url: "/pages/leave/leave?obj=" + JSON.stringify(obj)
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		width: 100vw;
		height: 100%;
		padding: 0 20rpx;
		box-sizing: border-box;

		.top-btn {
			margin: 50rpx auto;
			width: 40%;
		}

		.btn {
			margin: 0 auto;
			margin-top: 50rpx;
			width: 20%;

		}

		.card {
			width: 100%;
			padding: 40rpx;
			box-sizing: border-box;
			box-shadow: 5rpx 5rpx 10rpx 1px rgba(0, 0, 0, 0.3);
			background-color: #fff;
			border-radius: 20rpx;
			margin-top: 50rpx;

			.inputBox {
				width: 100%;
				height: 45rpx;
				padding: 6px 9px;
				border-radius: 4px;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				flex: 1;
				border-width: 0.5px !important;
				border-color: #dadbde !important;
				border-style: solid;
				color: rgb(192, 196, 204);
			}

			.fontSColor{
				color: #000;
			}
		}

		.head {
			width: 100%;
			border-radius: 20rpx;
			box-shadow: 5rpx 5rpx 10rpx 1px rgba(0, 0, 0, 0.3);

			.head-txt {
				width: 100%;
				padding: 40rpx;
				box-sizing: border-box;
				background-color: #fff;
				border-bottom-left-radius: 20rpx;
				border-bottom-right-radius: 20rpx;

				.head-btn {
					width: 100%;
					display: flex;
					align-items: center;

					.head-btn-item {
						width: 33.33%;
						display: flex;
					}
				}

				.head-txt-item {
					margin-bottom: 20rpx;
					color: #515151;
					font-weight: 600;
				}
			}

			.head-top {
				width: 100%;
				border-top-left-radius: 20rpx;
				border-top-right-radius: 20rpx;
				height: 100rpx;
				background-color: #449bed;
				display: flex;
				align-items: center;
				color: #fff;
				font-weight: bold;
			}
		}
	}
</style>